<template>
<div>
    <div class="body">
        <h1 >豆瓣最受欢迎的影评</h1>
<!-- 左 -->
        <div class="left">
            <span><router-link to="/Comment" style="font-size:0.95em;color:#999">最受欢迎的</router-link>/新片评论</span>
<!-- 第一个 -->
            <div class="discuss">
                <img style="width: 75px;height: 105px;float: left" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2673412189.webp" alt="">

                <div class="main_hd">
                    <span>
                        <img style="width: 24px;height: 24px;float: left;cursor:pointer;" src="https://img2.doubanio.com/icon/u181439563-1.jpg" alt="">
                        <a style="float:left;cursor:pointer;font-size:13px;color: #37a;"> 大头虾</a>
                        <el-rate style="float: left;"
                            v-model="value1"
                            disabled
                        >
                        </el-rate>
                    2021-08-01 00:25:01
                    </span>
                </div>

                <div class="main_bd">
                    <div class="h2">
                        <a style="color: #37a;">不敢以谢霆锋视角拍摄全片，是本片最大的悲哀</a>
                    </div>
                    <div class="text">
                        谢霆锋的演技离满分越来越近，烧菜没耽误他对演戏的投入 甄子丹的道貌岸然衬托了谢霆锋的选择的合理性 所谓正义，为自己心中的道义去做去拼 有仇报仇，有恩报恩 为了志同道合的伙伴，更为了自己心中的正义 不敢以谢霆锋视角拍摄全片，是本片最大的悲哀，假使本片可以以阿傲的视...
                        (<a style="cursor:pointer;">展开</a>)
                    </div>
                    <div class="agree">
                        
                    </div>
                </div>
            </div>
<!-- 第二个 -->
            <div class="discuss">
                <img style="width: 75px;height: 105px;float: left" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2673420377.webp" alt="">

                <div class="main_hd">
                    <span>
                        <img style="width: 24px;height: 24px;float: left;cursor:pointer;" src="https://img9.doubanio.com/icon/u164764260-5.jpg" alt="">
                        <a style="float:left;cursor:pointer;font-size:13px;color: #37a;"> HL</a>
                        <el-rate style="float: left;"
                            v-model="value1"
                            disabled
                        >
                        </el-rate>
                    2021-10-11 17:38:43
                    </span>
                </div>

            <div class="main_bd">
                <div class="h2">
                    <a style="color: #37a;">善恶的横截面</a>
                </div>
                <div class="text">
                    《历劫佳人》是奥逊威尔斯在好莱坞时期的最后一部作品，也是黑色电影的里程碑之作。他为了获得拍摄自由费尽了心思，甚至不惜放低姿态去跟制片人搞好关系，可却在最终剪辑的阶段前功尽弃，制片方完全剥夺了威尔斯的剪辑权，根据商业目的自行修改出了一个支离破碎的版本。看到自...
                    (<a style="cursor:pointer;">展开</a>)
                </div>
                <div class="agree">
                    
                </div>
            </div>
        </div>
<!-- 第三个 -->
            <div class="discuss">
                <img style="width: 75px;height: 105px;float: left" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2259429113.webp" alt="">

                <div class="main_hd">
                    <span>
                        <img style="width: 24px;height: 24px;float: left;cursor:pointer;" src="https://img2.doubanio.com/icon/u214009903-1.jpg" alt="">
                        <a style="float:left;cursor:pointer;font-size:13px;color: #37a;"> 不朽浩克</a>
                        <el-rate style="float: left;"
                            v-model="value1"
                            disabled
                        >
                        </el-rate>
                    2021-10-11 17:38:43
                    </span>
                </div>

            <div class="main_bd">
                <div class="h2">
                    <a style="color: #37a;">善恶的横截面</a>
                </div>
                <div class="text">
                    《历劫佳人》是奥逊威尔斯在好莱坞时期的最后一部作品，也是黑色电影的里程碑之作。他为了获得拍摄自由费尽了心思，甚至不惜放低姿态去跟制片人搞好关系，可却在最终剪辑的阶段前功尽弃，制片方完全剥夺了威尔斯的剪辑权，根据商业目的自行修改出了一个支离破碎的版本。看到自...
                    (<a style="cursor:pointer;">展开</a>)
                </div>
                <div class="agree">
                    
                </div>
            </div>
        </div>
<!-- 第四个 -->
            <div class="discuss">
                <img style="width: 75px;height: 105px;float: left" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2259429113.webp" alt="">

                <div class="main_hd">
                    <span>
                        <img style="width: 24px;height: 24px;float: left;cursor:pointer;" src="https://img2.doubanio.com/icon/u214009903-1.jpg" alt="">
                        <a style="float:left;cursor:pointer;font-size:13px;color: #37a;"> 不朽浩克</a>
                        <el-rate style="float: left;"
                            v-model="value1"
                            disabled
                        >
                        </el-rate>
                    2021-10-11 17:38:43
                    </span>
                </div>

            <div class="main_bd">
                <div class="h2">
                    <a style="color: #37a;">善恶的横截面</a>
                </div>
                <div class="text">
                    《历劫佳人》是奥逊威尔斯在好莱坞时期的最后一部作品，也是黑色电影的里程碑之作。他为了获得拍摄自由费尽了心思，甚至不惜放低姿态去跟制片人搞好关系，可却在最终剪辑的阶段前功尽弃，制片方完全剥夺了威尔斯的剪辑权，根据商业目的自行修改出了一个支离破碎的版本。看到自...
                    (<a style="cursor:pointer;">展开</a>)
                </div>
                <div class="agree">
                    
                </div>
            </div>
        </div>
    </div>
<!-- 右 -->
        <div class="right">
            <p style="font-size:13px;color:#999;width:300px;line-height:1.7;">
                如果你觉得一篇评论对你有帮助，请你点击“有用”。你的投票直接决定哪些评论出现在豆瓣首页和“豆瓣最受欢迎的评论”里，以及在书、电影和音乐介绍页里评论的排序。
            </p>
            <p style="color:#999;font: 13px Helvetica,Arial,sans-serif;line-height:1.7;">
                所有“没用”的点击都是匿名的。
            </p>
            <div class="follow">
                    <img src="https://img3.doubanio.com/f/shire/4bace6d78006ece72f0e4a2b714fcfe3b54dd4e2/pics/feed1.png" alt="">
                    <a style="color: #37a;text-decoration: none;cursor: pointer;font-size: 13px;" href="https://movie.douban.com/feed/review/movie">订阅豆瓣最受欢迎的影评</a>
            </div>
        </div>
    </div>
</div>
</template>

<style lang="scss" scoped>
    .body{
        width: 1040px;
        height: 750px;
        margin: 0 auto;
            .left{
                width: 675px;
                float: left;
                padding-right: 40px;
                .discuss{
                    border-top: 1px solid #ccc;
                    width: 675px;
                    // height: 188.333px;
                    padding: 20px 0px 20px;
                    .main_hd{
                
                    }
                    .main_bd{
                    width: 565px;
                    // height: 154.333px;
                    margin: 10px 0px 0px 0px;
                    padding: 0px 10px 0px 100px;
                    position: relative;
                        .h2{
                            width:565px;
                            line-height:150%;
                            float:left;
                            cursor:pointer;
                            font-size:14px;
                            margin:10px 0px 10px 0px;
                        }
                        .text{
                            width: 565px;
                            font-size: 13px;
                        }
            // .agree{
            //     width: 24px;
            //     height: 24px;
            //     overflow: hidden;
            //     position: absolute;
            //     top: 130px;
            // }
                    }
                }
            }
            .right{
            float: left;
            }
    }
</style>

<script>
export default {
    data() {
        return {
            value1: 5,
            value2: 2,
            value3: 5,
            value4: 3
        }
    }
}
</script>